<template>
<draggable
    class="components-draggable"
    :list="item.list"
    :group="{ name: groupName, pull: 'clone', put: false }"
    :clone="clone"
    draggable=".components-item"
    :sort="false"
    :move="move"
    @end="$emit('end',$event)"
    >
    <div
        v-for="(element, index) in item.list"
        :key="index"
        class="components-item"
        @click="$emit('click',element)"
    >
        <div class="components-body">
          <div :class="['item', element.__config__.tagIcon]">
              <img v-if="element.__config__.tagIcon === 'card-default'" src="../../assets/tagIcon/card-default.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'card'" src="../../assets/tagIcon/card.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'iframe'" src="../../assets/tagIcon/iframe.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'input'" src="../../assets/tagIcon/input.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'text'" src="../../assets/tagIcon/input.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'select-multiple'" src="../../assets/tagIcon/select-multiple.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'select'" src="../../assets/tagIcon/select.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'table'" src="../../assets/tagIcon/table.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'textarea'" src="../../assets/tagIcon/textarea.png" alt="" />
              <img v-else-if="element.__config__.tagIcon === 'upload-img'" src="../../assets/tagIcon/upload-img.png" alt="" />
              <img  v-else-if="element.__config__.tagIcon === 'upload'" src="../../assets/tagIcon/upload.png" alt="" />
              <div class="label">{{ element.__config__.label }}</div>
              <div v-if="element.__config__.labelTip">({{element.__config__.labelTip}})</div>
          </div>
        </div>
    </div>
</draggable>
</template>

<script>
import draggable from 'vuedraggable'
export default {
    props: {
        item: Object,
        clone:Function,
        groupName: {
            type: String,
            default: 'item'
        },
        move: Function
    },
    components: {
        draggable
    },
};
</script>

<style lang="scss" scoped>
@import "../../styles/variables.scss";
.components-draggable{
  padding: 0px 20px 4px;
  display: flex;
  flex-wrap: wrap;
}
.components-item {
  // width: calc((100% - 32px) / 3); /* 宽度为容器的1/3减去间隔 */
  width: 100%;
  margin-bottom: 16px;
  &:nth-child(3n) {
    margin-right: 0;
  }
}
.components-body {
  background: #fff;
}
.item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: move;
  border: 1px solid #fff;
  border-radius: 3px;
  &:hover {
    border: 1px dashed $lighterBlue;
    color: $lighterBlue;
  }
  img {
    width: 100%;
  }
  .label{
    position: absolute;
    bottom: 5px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 22px;
  }
  &.select {
    .label {
      bottom: 0px;
    }
  }
}
</style>
